<script setup lang='ts'>
import { useGetUserInfo } from '@fl/api/iam-api'
import { ContentWrap } from '@fl/origin-components/ContentWrap'
import { ElDivider, ElSkeleton, ElTabPane, ElTabs } from 'element-plus'
import { ref, } from 'vue'
import EditPassword from './components/EditPassword.vue'

const activeName = ref('first')

const {data, isLoading } = useGetUserInfo()
console.log("🚀 ~ data:", data)

</script>
  
<template>
  <div class="flex size-full">
    <ContentWrap title="个人信息" class="w-400px">
      <ElSkeleton v-if="isLoading" animated />
        <template v-else>
          <div class="flex justify-between items-center">
            <div>账号</div>
            <div>{{ data!.user.userName }}</div>
          </div>
          <ElDivider />
          <div class="flex justify-between items-center">
            <div>昵称</div>
            <div>{{ data!.user.nickName }}</div>
          </div>
          <ElDivider />
          <div class="flex justify-between items-center">
            <div>手机号码</div>
            <div>{{ data!.user.phonenumber ?? '-' }}</div>
          </div>
          <ElDivider />
          <div class="flex justify-between items-center">
            <div>用户邮箱</div>
            <div>{{ data!.user.email || '-' }}</div>
          </div>
          <ElDivider />
          <div class="flex justify-between items-center" v-if="data.user.dept">
            <div>所属部门</div>
            <div>{{ data.user.dept.deptName }} / {{ data.postGroup }}</div>
          </div>
        </template>
    </ContentWrap>
    <ContentWrap title="基本资料" class="flex-[3] ml-20px">
      <ElTabs v-model="activeName">
        <ElTabPane label="修改密码" name="first">
          <EditPassword />
        </ElTabPane>
      </ElTabs>
    </ContentWrap>
  </div>

</template>

<style lang="less" scoped>
.avatar {
  position: relative;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    font-size: 50px;
    color: #fff;
    background-color: rgb(0 0 0 / 40%);
    border-radius: 50%;
    content: '+';
    opacity: 0;
    justify-content: center;
    align-items: center;
  }

  &:hover {
    &::after {
      opacity: 1;
    }
  }
}
</style>
